<!--
 * @Author: 宋杰
 * @Date: 2021-01-19 17:16:01
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-15 00:51:18
 * @Description: 一家十一口(猜一字)
-->
<template>
  <div class="jz">
    <div ref="myChart" style="width:100%; height: 100%"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {
    // bottomLeftChart
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts
      // let t = this;
      var myChart = this.$echarts.init(this.$refs.myChart);
      console.log(myChart, "myChart");
      myChart.setOption({
        title: {
          text: "",
          subtext: "",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        
        // legend: {
        //   data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        //   left:"center",
        //   top:"bottom",
        //   orient:"horizontal",
        // },
        graphic: [
          //为环形图中间添加文字
          {
            type: "text",
            left: "center",
            top: "45%",
            style: {
              text: "逾期与不良",
              textAlign: "center",
              fill: "#32b9ef",
              fontSize: 15,
            },
          },
        ],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["55%", "75%"],
            center: ["50%", "50%"],
            data: [
              {
                value: 36,
                name: "逾期率36%",
                itemStyle: { color: "#b2e5fa " },
              },
              { value: 64, name: "不良率64%", itemStyle: { color: "#1F7192" } },
            ],
            animationEasing: "cubicInOut",
            animationDuration: 2600,
            label: {
              // emphasis: mylabel
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// .jz {
//   position: fixed;
//   right: 0;
//   margin-right: 7.5rem;
// }
</style>